'Good Morning Message Maker' - Supragyay Kaval

Select Image

Font 1

Font 2

Font 3

Select Color

Font weight

Font Size

Heading 1

Heading 2

Coding for the Web '23/24 --- Assignment 1:

Using the provided boilerplate, program a 'Good Morning Message Maker'. Include the following types of inputs / elements:

A dropdown menu to choose between 3 image options. Use the following three categories for the images: Sunrise, Flowers, and Still-Life. The dropdown menu should display the category names.

Two text input boxes – one to enter text values for the primary title, and one for the secondary title.

A list of radio buttons to toggle between 3 font families for the titles. You may either use the default font-families such as 'cursive', 'serif', and 'sans-serif', or specify your own font families (via font-face).

A dropdown menu to choose the font colour. Specify upto 9 colour options.

A range slider to adjust the font size (in pixels).

A number input to specify text stroke (in pixels).

Take your time to carefully go through the index.html file and understand the markup. The document has comments with instructions regarding what to add/edit.

The markup for the inputs and controls have to be included inside the <section> with the id "input"

The markup for the <img> and titles/texts have to be included inside the <div> with the id "output-canvas". The titles/texts need to use the ids "text-1"" and "text-2" respectively.

Inside the <h1> in <header>, include your names after the dash.

Make sure to use labels for all the inputs

Once you are done with the functional bits of this assignment, use CSS to override the default styling of the input elements.

Once your are done with your assignment, replace all the instructions text inside this popup (<div> with the id, "popup") with the following text:
This page was made by [insert names], as part of a unit titled 'Coding for the Web', facilitated during the 2023/24 odd semester at Srishti Manipal Institute.

DO NOT EDIT the style.css and script.js files! Use the style-to-edit.css and script-to-edit.js files to write your own CSS and JS.